﻿<div class="sample_title">Datagrid</div>

code:
<div class="sample_code" rel="brush: js; html-script: false;">
    &lt;script type="text/javascript"&gt
        $(document).ready(function() {
            $('#datagrid').grid({ /* Configuration */ });
        });
    &lt;/script&gt;
        
    &lt;div id="datagrid"&gt;&lt;/div&gt;
    <% for (int i = 0, max_i = 7; i < max_i; i++) { Response.Write("<br />"); } %>
</div><br />

<fieldset>
    <legend>Configuration</legend>
    <table class="tb_apiconfig">
    <tr>
        <td class="label">title</td>
        <td><font color="blue">(string) default: null</font><br />
            Datagrid Title, will be hidden if not set
        </td>
    </tr>
    <tr>
        <td class="label">showTableToggleBtn</td>
        <td><font color="blue">(boolean) default: true</font><br />
            Set Toggle Button, if <u>true</u> then Toggle Appear/Hide will be appear on right-upper of datagrid
        </td>
    </tr>
    <tr>
        <td class="label">url <font color="red"><sup>*</sup></font></td>
        <td><font color="blue">(string)</font><br />
            Remote Data Adress
        </td>
    </tr>
    <tr>
        <td class="label">colModel <font color="red"><sup>*</sup></td>
        <td><font color="blue">(Array of Object)</font><br />
            Set Column Properties  <button onclick="$('#api_datagrid_detailcolmodel').toggle();">Show/Hide Detail</button><br />
            
            <div id="api_datagrid_detailcolmodel" style="display:none;">
                <table class="tb_apiconfig">
                <tr>
                    <td class="label">name <font color="red"><sup>*</sup></font></td>
                    <td><font color="blue">(string) default: null</font><br />
                        Column Name (must be unique)
                    </td>
                </tr>
                <tr>
                    <td class="label">label</td>
                    <td><font color="blue">(string)</font><br />
                        Header Title of Column (if not set, then Header Title will be named same as name)
                    </td>
                </tr>
                <tr>
                    <td class="label">align</td>
                    <td><font color="blue">(string) default: left</font><br />
                        Set Align of column, option : [ left, center, right ]
                    </td>
                </tr>
                <tr>
                    <td class="label">width</td>
                    <td><font color="blue">(numeric) default: 120</font><br />
                        Set Width of Column
                    </td>
                </tr>
                <tr>
                    <td class="label">hide</td>
                    <td><font color="blue">(boolean) default: false</font><br />
                        Show/Hide column
                    </td>
                </tr>
                <tr>
                    <td class="label">type</td>
                    <td><font color="blue">(string) default: text</font><br />
                        Set Type of column, option : [ text, numeric, date, <i>percent_bar</i> ]
                    </td>
                </tr>
                <tr>
                    <td class="label">precision</td>
                    <td><font color="blue">(numeric) default: 0</font><br />
                        Set Precision of number format (only used when <u>type</u> is <u>numeric</u>)
                    </td>
                </tr>
                <tr>
                    <td class="label">def</td>
                    <td><font color="blue">(string) default: ''</font><br />
                        Set default editable column
                    </td>
                </tr>
                <tr>
                    <td class="label">editable</td>
                    <td><font color="blue">(boolean) default: false</font><br />
                        Set editable column
                    </td>
                </tr>
                </table>
            </div>
        </td>
    </tr>
    <tr>
        <td class="label">sortname <font color="red"><sup>*</sup></td>
        <td><font color="blue">(string)</font><br />
            Sort by Field Name (must be member of colModel)
        </td>
    </tr>
    <tr>
        <td class="label">sortorder</td>
        <td><font color="blue">(string) default: asc</font><br />
            Sort order option : [asc, desc]
        </td>
    </tr>
    <tr>
        <td class="label">width</td>
        <td><font color="blue">(numeric) default: auto</font><br />
            Set Datagrid Width
        </td>
    </tr>
    <tr>
        <td class="label">height</td>
        <td><font color="blue">(numeric) default: 258</font><br />
            Set Datagrid Height
        </td>
    </tr>
    <tr>
        <td class="label">multiselect</td>
        <td><font color="blue">(boolean) default: true</font><br />
            Set Allow Multiselect, if <u>true</u> then checkbox in left column will be appear
        </td>
    </tr>
    <tr>
        <td class="label">highlight</td>
        <td><font color="blue">(boolean) default: true</font><br />
            Set Allow Highlight, if <u>true</u> then row will be highlighted when selected
        </td>
    </tr>
    <tr>
        <td class="label">autoload</td>
        <td><font color="blue">(boolean) default: true</font><br />
            Set Autoload Remote Data, if <u>true</u> then grid will send request data to fill datagrid after object created inf first time
        </td>
    </tr>
    <tr>
        <td class="label">autoFill</td>
        <td><font color="blue">(boolean) default: false</font><br />
            Set autoFill, if <u>true</u> then height is automatic resize depend on number of data rows
        </td>
    </tr>
    <tr>
        <td class="label">usepager</td>
        <td><font color="blue">(boolean) default: true</font><br />
            Set Datagrid using pager, if <u>true</u> then datagrid will use paging instead all data will be filled into grid
        </td>
    </tr>
    <tr>
        <td class="label">searchitems</td>
        <td><font color="blue">(Array of Object)</font><br />
            Set Search Item Column Properties <button onclick="$('#api_datagrid_detailsearchitem').toggle();">Show/Hide Detail</button><br />
            
            <div id="api_datagrid_detailsearchitem" style="display:none;">
                <table class="tb_apiconfig">
                <tr>
                    <td class="label">name <font color="red"><sup>*</sup></font></td>
                    <td><font color="blue">(string) default: null</font><br />
                        Column Search Name (must be unique)
                    </td>
                </tr>
                <tr>
                    <td class="label">label</td>
                    <td><font color="blue">(string)</font><br />
                        Label Of Field Search Column (if not set, then Label will be named same as name)
                    </td>
                </tr>
                <tr>
                    <td class="label">value</td>
                    <td><font color="blue">(string) default: ''</font><br />
                        Set default keyword value of search field
                    </td>
                </tr>
                <tr>
                    <td class="label">type</td>
                    <td><font color="blue">(string) default: text</font><br />
                        Set Type of Field Search Column, option : [ text, numeric, date, <i>percent_bar</i> ]
                    </td>
                </tr>
                <tr>
                    <td class="label">precision</td>
                    <td><font color="blue">(numeric) default: 0</font><br />
                        Set Precision of number format (only used when <u>type</u> is <u>numeric</u>)
                    </td>
                </tr>
                <tr>
                    <td class="label">range</td>
                    <td><font color="blue">(boolean) default: false</font><br />
                        Set Searching Method is range, (automatic <u>false</u> when <u>type</u> is <u>text</u>)
                    </td>
                </tr>
                <tr>
                    <td class="label">from</td>
                    <td><font color="blue">(string) default: ''</font><br />
                        Set default keyword "from value" of search field (used when <u>range</u> is <u>true</u>)
                    </td>
                </tr>
                <tr>
                    <td class="label">value</td>
                    <td><font color="blue">(string) default: ''</font><br />
                        Set default keyword "to value" of search field (used when <u>range</u> is <u>true</u>)
                    </td>
                </tr>
                </table>
            </div>
        </td>
    </tr>
    <tr>
        <td class="label">extfilter</td>
        <td><font color="blue">(string)</font><br />
            Add external <u>selector string</u> filter
        </td>
    </tr>
    
    <tr>
        <td class="label">actionButton</td>
        <td><font color="blue">(Array of Object)</font><br />
            Set Action Button Properties <button onclick="$('#api_datagrid_detailactionbutton').toggle();">Show/Hide Detail</button><br />
            
            <div id="api_datagrid_detailactionbutton" style="display:none;">
                <table class="tb_apiconfig">
                <tr>
                    <td class="label">label <font color="red"><sup>*</sup></font></td>
                    <td><font color="blue">(string) default: ''</font><br />
                        Title/Label of Action Button
                    </td>
                </tr>
                <tr>
                    <td class="label">icon</td>
                    <td><font color="blue">(string) default: null</font><br />
                        Set icon of button
                    </td>
                </tr>
                <tr>
                    <td class="label">action(data) <font color="red"><sup>*</sup></font></td>
                    <td><font color="blue">(function) default: function(){}</font><br />
                        Will be executed after action button clicked
                    </td>
                </tr>
                <tr>
                    <td class="label">visible(data)</td>
                    <td><font color="blue">(function) default: true</font><br />
                        Function must be return boolean in order to define visibility of button
                    </td>
                </tr>
                </table>
            </div>
        </td>
    </tr>
    
    <tr>
        <td class="label">grouping</td>
        <td><font color="blue">(boolean) default: false</font><br />
            Set allow grouping
        </td>
    </tr>
    <tr>
        <td class="label">group</td>
        <td><font color="blue">(Object)</font><br />
            &lt;-- Under Construction --&gt;
        </td>
    </tr>
    <tr>
        <td class="label">afterLoad()</td>
        <td><font color="blue">(function)</font><br />
            Will be executed after requested remote data filled into grid
        </td>
    </tr>
    <tr>
        <td class="label">rowClick(data)</td>
        <td><font color="blue">(function)</font><br />
            Will be executed after row clicked
        </td>
    </tr>
    <tr>
        <td class="label">rowDoubleClick(data)</td>
        <td><font color="blue">(function)</font><br />
            Will be executed after row doubleclicked
        </td>
    </tr>
    
</table>
</fieldset>